<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				font-size:16px;
				font-family:幼圆;
				color:black;
			}
			ul,ol{
				list-style:none;
			}
			div{
				width:600px;
				height:300px;
				margin:100px auto;
				border:4px solid black;
				position:relative;
			}
			.ul{
				width:600px;
				height:300px;
				position:relative;
			}
			.ul li,.ul li img{
				width:600px;
				height:300px;
			}
			.ul li img{
				position:absolute;
				top:0;
				left:0;
			}
			.list{
				width:380px;
				height:70px;
				position:absolute;
				top:200px;
				left:100px;
				z-index:999;
			}
			.list li{
				float:left;
				width:50px;
				height:30px;
				margin:20px;
				border:1px solid black;
				text-align:center;
				line-height:30px;
				background-color:rgba(255,255,255,.5);
				cursor:pointer;
			}
			.list li:hover{
				color:white;
				background-color:rgba(255,0,0,.5);
			}
		</style>
	</head>
	<body>
		<div>
			<ul class="ul">
				<li><img src="img/1.jpg" alt="图片加载失败!" ></li>
				<li><img src="img/2.jpg" alt="图片加载失败!" ></li>
				<li><img src="img/3.jpg" alt="图片加载失败!" ></li>
				<li><img src="img/4.jpg" alt="图片加载失败!" ></li>
			</ul>
			<ol class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
		</div>
		
		<script type="text/javascript">
			function getStyle(obj,pro){
				return window.getComputedStyle ? window.getComputedStyle(obj)[pro] : obj.currentStyle(pro);
			}
			
			function move(obj,json,fn){
				
			}
			
			var oImg = document.querySelectorAll(".ul li img");
			var oList = document.querySelectorAll(".list li");
			var oZindex = 0;
			var timer = null;
			
			//小图标点击事件
			for(var i=0; i<oList.length; i++){
				oList[i].index = i;
				oList[i].onclick = function(){
					oZindex++;
					oImg[this.index].style.zIndex = oZindex; 
				}
			}
			
			//自动轮播
			function auto(){
				clearInterval(timer);
				timer = setInterval(function(){
					
				},2000);
			}
			auto();
			
		</script>
	</body>
</html>
